// JavaScript Document

var dataMonthArray = [9, 15.8, 14, 12, 13.8, 19, 17, 11.7, 9, 15.8, 14, 12, 13.8, 19, 17, 11.7,14, 12, 13.8, 19, 17, 11.7,9,12,13.8,11,10,14,13.9,12];
var dataYearArray = [19, 2, 14, 12, 13.8, 19, 17, 11.7, 9, 15.8, 14, 12];

//选中车辆
var carSelect = "";

//页面侧边栏操作
$(function(){

    var theHeight = $('.height40').height();
    $('.tbody-div').height('300px');

    var dataString = "";
    var dataStringMonth = "";

    $('#vehi-list').on('click','#vehi-list>li',function(){
        $(this).children('ul').slideDown();//中转站点击下拉展开
        $(this).siblings('li').children('ul').slideUp();//其他展开的同时收起

    });


    //选择车辆，查询车辆数据
    $(document).on('click','.car',function(){
        var carNumber = $(this).attr('name');

        $('.car').css('background-color','#fff');
        $(this).css('background-color','#9cffaa');

        carSelect = carNumber;
        var carstr = "<option>"+carNumber+"</option>";
        $('#scarstring').html(carstr);
        $('#scarstring').attr('name',carNumber);
        //ajax start
        $.ajax({
            type: "POST",
            url: "../car/getCarAveRateInfo",
            dataType : 'json',
            data:{
                carNumber:carNumber
            },
            success: function(data){
                dataMonthArray = data.dataMonth;
                dataYearArray = data.dataYear;

                dataString = data.messionString;
                dataStringMonth = data.messionStringMonth;
                $('#messionString').html(dataStringMonth);

                chat1();
                chat2();
                chat3();
                chat4();

            }
        });
        //ajax end
    });



    $('.tabChange').on('click','span',function(){
        $(this).addClass('twin-bg');
        $(this).addClass('hmonth');
        $(this).siblings('span').removeClass('twin-bg');
        var index = $(this).index();
        var table = $('.tabChange').siblings('.showdiv');
        table.find('.showmap').css('display','none');
        table.find('.showmap:eq('+index+')').css('display','block');

        var mhtml = $('.hmonth').html();
        // alert(mhtml);
        if(mhtml == "月度")
        {
            $('#table-thead').html(dataStringMonth);
        }
        else
        {
            $('#table-thead').html(dataString);
        }
    });


    window.onload=function(){
        var rightHeight=$('.span9').height();//获取右边栏大小
        $('.span3').height(rightHeight)//让左边栏等值于右边栏
    }

});


function chat1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main'));

    // var dataAxis = ['1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日','1日'];
    var dataAxis = ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日','11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日','23日','24日','25日','26日','27日','28日','29日','30日'];

    var data = [40,81,70,50,60,10,80,92,47,40,85,40,70,62,78,57,62,15,78,82,70,50,40,60,68,50,45,70,68,60];
    var yMax = 120;
    var dataShadow = [];

    for (var i = 0; i < dataMonthArray.length; i++) {
        dataShadow.push(yMax);
    }

    option = {
        backgroundColor:'#fff',
        title: {
            text: '',
            //left:0,
            //top:0,
            //padding:[10,1500,10,50],
            //backgroundColor:'#aed7ad',
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#ccc'
                },
                splitNumber:30//Y轴分割段数
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },

            z: 10
        },
        yAxis :
            {
                max:100,
                type : 'value',
                splitNumber:6,//Y轴分割段数
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value} %'
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
            },

        series: [
            {
                type: 'bar',
                barWidth: 10,//固定柱子宽度
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#9e9e9e'
                            }
                        },
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6dbb8d'},
                                {offset: 1, color: '#6dbb8d'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6dbb8d'},
                                {offset: 1, color: '#6dbb8d'}
                            ]
                        )
                    }
                },
                label: {//柱状体顶端 显示文字
                    normal: {
                        show: true,
                        position: 'top'
                    },
                },
                data: dataMonthArray
            }
        ]
    };

    // Enable data zoom when user click bar.
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
}


function chat2() {
    var myChart2 = echarts.init(document.getElementById('main1'));

    var dataAxis = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    var data = [19, 2, 14, 12, 13.8, 19, 17, 11.7, 9, 15.8, 14, 12];
    var yMax = 20;	var yMax = 20;
    var dataShadow = [];

    for (var i = 0; i < dataYearArray.length; i++) {
        dataShadow.push(yMax);
    }

    option = {
        backgroundColor:'#fff',
        title: {
            text: '',
            //left:0,
            //top:0,
            //padding:[10,1500,10,50],
            //backgroundColor:'#aed7ad',
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                show: false
            },
            splitNumber:31,//Y轴分割段数
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            max:100,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitNumber:10,//Y轴分割段数
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            itemWidth:100,
            itemHeight:30,
            orient: 'horizontal',
            left: 'right',
            data: ['月度','年度']
        },
        /*tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },*/
        series: [
            {
                type: 'bar',
                barWidth: 10,//固定柱子宽度

                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#9e9e9e'
                            }
                        },
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6dbb8d'},
                                {offset: 1, color: '#6dbb8d'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6dbb8d'},
                                {offset: 1, color: '#6dbb8d'}
                            ]
                        )
                    }
                },
                label: {//柱状体顶端 显示文字
                    normal: {
                        show: true,
                        position: 'top'
                    },
                },
                data: dataYearArray
            }

        ]
    };

    myChart2.setOption(option);// 使用刚指定的配置项和数据显示图表
}


function chat3() {
    var myChart3 = echarts.init(document.getElementById('part1'));
    option = {
        title : {
            text: '单车工时',
            x:'left'
        },
        legend: {
            orient: 'horizontal',
            left: '100px',
            data: ['空闲工时','有效工时']
        },
       /* tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },*/
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '40%',
                center: ['50%', '60%'],
                data:[
                    {value:475, name:'空闲工时'},
                    {value:269, name:'有效工时'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart3.setOption(option);
}


function chat4() {
    var myChart4 = echarts.init(document.getElementById('part2'));
    option = {
        title : {
            x:'center'
        },
        /*tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },*/
        legend: {
            orient: 'horizontal',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart4.setOption(option);
}






